
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>校验</title>
    <link href="/static/devtools30/layui/css/layui.css" rel="stylesheet" />
    <link href="/static/devtools30/css/devindexbase.css" rel="stylesheet" />
    <script src="/static/devtools30/js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="/static/devtools30/layui/layui.all.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/devtoolCommon.js" type="text/javascript"></script>


    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/theme/eclipse.css" rel="stylesheet" type="text/css" />
    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/lib/codemirror.css" rel="stylesheet" />
    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/addon/display/fullscreen.css" rel="stylesheet" />
    <script src="/static/devtools30/js/plugins/codemirror-5.14.2/lib/codemirror.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/plugins/codemirror-5.14.2/mode/sql/sql.js" type="text/javascript"></script>

    <style>
        .CodeMirror {
            border: 1px solid #eee;
        }
        .wrap {
            padding: 5px;
            background: #f7f7f7;
        }

        .wrap>div {
            width: 49%;
        }

        .layui-table,
        .layui-table-view {
            margin: 0!important;
        }


        /*下拉框高度*/

        .addwrap .layui-input,
        .layui-select {
            height: 25px;
        }


        /*表单左边文本样式*/

        .addwrap .layui-form-label {
            padding: 0;
            text-align: left;
            height: 26px;
            line-height: 26px;
            width: 50px;
        }

        .height26 .layui-form-item {
            height: 26px;
            margin-bottom: 10px;
        }

        .layui-form-label {
            width: 50px;
            text-align: left;
            height: 26px;
            line-height: 26px;
            padding: 0;
        }

        .layui-input,
        .layui-select,
        .layui-textarea {
            height: 26px;
        }

        .width120 .layui-input-inline {
            width: 150px!important;
        }

        .wrap .tjbtn {
            width: 50%;
            right: 0;
            left: 50%;
        }

        .rightform {
            padding: 19px 8px;
            background: #ffffff;
        }

        .textheight {
            height: 100px;
        }

        .layui-form-item .layui-form-checkbox[lay-skin=primary] {
            margin-left: 0!important;
        }
        /*页面内边距*/

        .addwrap {
            padding: 30px 100px 30px 100px;
        }


        /*下拉框高度*/

        .addwrap .layui-input,
        .layui-select {
            height: 25px;
        }


        /*表单左边文本样式*/

        .addwrap .layui-form-label {
            padding: 0;
            text-align: left;
            height: 26px;
            line-height: 26px;
            width: 50px;
        }


        /*下拉框子项样式*/

        .addwrap .layui-form-select dl {
            top: 26px;
            padding: 0;
        }


        /*下拉框子项内容高度*/

        .addwrap .layui-form-select dl dd,
        .layui-form-select dl dt {
            line-height: 24px;
        }

        .addwrap .layui-input-block {
            min-height: 26px;
            margin-left: 35px;
        }


        /*复选框外边距*/

        .layui-form-item .layui-form-checkbox[lay-skin=primary] {
            margin-top: 0;
            margin-left: 64px;
        }

        .addwrap .layui-input-block {
            margin-left: 0;
        }


        /*多行文本框样式*/

        .layui-textarea {
            min-height: 50px;
        }

        .height26 .layui-form-item {
            height: 26px;
        }


        /*必填红色星号样式*/

        .layui-form-mid {
            line-height: normal!important;
        }
    </style>
</head>
<body>
<div class="flex flex-jusity-betreen wrap">
    <div>
        <div class="backgroundf">
            <table id="mygrid" lay-filter="mygrid"></table>
        </div>
        <div class="backgroundf">
            <table id="mygrid2" lay-filter="mygrid2"></table>
        </div>
    </div>
    <div class="rightform layui-form" lay-filter="form">
        <input type="hidden" name="id" id ="id" value=""/>
        <input type="hidden" name="templeid" id ="templeid" value=""/>
        <input type="hidden" name="checktype" id ="checktype" value=""/>
        <div class="flex flex-jusity-betreen flex-align-center height26">
            <div class="layui-form-item width120">
                <label class="layui-form-label">校验名称</label>
                <div class="layui-input-inline marginleft10">
                    <input type="text" id="name" name="name" placeholder="校验名称" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux colorred">*</div>
            </div>
            <div class="layui-form-item width120">
                <label class="layui-form-label" style="width: 80px">错误消息提示</label>
                <div class="layui-input-inline marginleft10">
                    <input type="text" name="errorinfo" id="errorinfo" placeholder="错误消息提示" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux colorred">*</div>
            </div>
        </div>
        <div class="layui-form-item flex flex-align-center height26">
            <label class="layui-form-label">其他设置</label>
            <div class="marginleft10">
                <input type="checkbox" checked name="active" id="active" value="1" title="是否激活" lay-skin="primary">
            </div>
        </div>
        <div class="layui-form-item height26">
            <label class="layui-form-label">备注说明</label>
            <div class="layui-input-inline marginleft10" style="width:250px">
                <input type="text" name="bz" id="bz" placeholder="请输入备注说明" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="padding100 flex"  >
            <div class="">代码</div>
            <div class="colorred marginleft10" id="sqlmsg" style="display: none">* 查询结果个数大于1为校验失败

            </div>
            <div class="colorred marginleft10"  id="jsmsg" style="display: none">* 代码的结果只能为true或false
                <a href="javascript:;" style="color: #1e9fff;" onclick="showJsDemo()" title=""><span style="font-size: 14px;">【代码示例】</span></a>
            </div>
        </div>

        <div class="layui-input-block" style="margin-left: 0;font-size: 13px;">
            <textarea name="content" id="content" placeholder="请输入JS代码" class="layui-textarea textheight"></textarea>
        </div>
        <div class="layui-form-item">
            <div class="flex flex-jusity-around tjbtn">
                <button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary qx" onclick="closeWin()">取消</button>
                <button class="layui-btn layui-btn-radius layui-btn-sm " lay-submit lay-filter="save">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>

    var id=dlCommon.getUrlParam("id");
    var templeid=dlCommon.getUrlParam("tempid");
    var checktype=dlCommon.getUrlParam("type");
    var height = dlCommon.getWinHeight();
    var width=dlCommon.getWinWidth();

    var grid3tableid;
    var grid3tablecode;

    var editor;
    $(function(){
        initGrid();
        initEvent();
        getData();
        getMetadataList();
    });
    function closeWin(){
        dlCommon.closeParentLayer();
    }
    function showJsDemo(){
        parent.dlCommon.layeropen(width,height,"校验demo","/V_DevtFormListTemplateSqlCheckController/demo")
    }
    function initEvent(){
        editor = CodeMirror.fromTextArea(document.getElementById("content"), {
            lineNumbers: true,
            matchBrackets: true,
            lineWrapping:true,
            mode: "text/x-mssql",
            extraKeys: {

                "Esc": function(cm) {
                    if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                }
            }
            // mode: "text/x-sql"
        });
        editor.setOption("theme", "eclipse");
        editor.setSize('auto', height-250);


        layui.form.on('submit(save)', function(data){
            saveData();
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        layui.form.render();
    }
    function getData(){
        $("#templeid").val(templeid);

        if(!id){
            var defaultvalue=" select id \r\n  from TESTDEMOXML \r\n  where name like '%[主表@名称]%' \r\n";
            if(checktype=="0"){
                $("#checktype").val("customsql");
                $("#sqlmsg").show();
                $("#jsmsg").hide();
            }else{
                $("#checktype").val("customjs");
                $("#sqlmsg").hide();
                $("#jsmsg").show();
                defaultvalue="function fo(){ \r\n \r\n return true;\r\n}\r\n";
            }
            editor.setValue(defaultvalue);
            return;
        }

        dlCommon.getJSON("/DevtFormListTemplateSqlCheckController/getdata",{id:id},function(res){
            if(res.success){
                $("#id").val(res.data.id);
                $("#checktype").val(res.data.checktype);
                if(res.data.checktype=="customjs"){
                    $("#sqlmsg").hide();
                    $("#jsmsg").show();
                }else {
                    $("#sqlmsg").show();
                    $("#jsmsg").hide();
                }
                $("#name").val(res.data.name);
                $("#errorinfo").val(res.data.errorinfo);
                $("#active").prop("checked",res.data.active==1?true:false);
                $("#bz").val(res.data.bz);
                editor.setValue(res.data.content);

                layui.form.render();

            }
        },true);
    }
    function saveData(){
        var data = layui.form.val('form');
        if(data.active==undefined){
            data.active=0;
        }

        data.content=editor.getValue();
        var url="/DevtFormListTemplateSqlCheckController/save";
        if(data.checktype=="customsql"){
            url="/DevtFormListTemplateSqlCheckController/saveSql";
        }
        dlCommon.post(url,data,function(res){
            if(!res.success){
                dlCommon.layerError(res.msg);
                return;
            }
            dlCommon.layerSuccess("保存成功",function(){
                parent.getSqlCheckData();
                closeWin();
            })
        },true)
    }
    function selectField(fieldName){
        var relation="["+grid3tablecode+"@"+fieldName+"]";
        var content=editor.getValue();
        editor.replaceSelection(relation);
        editor.focus();
    }

    function selectTable(tableName){
        var relation=" "+tableName;
        var content=editor.getValue();
        editor.replaceSelection(relation);
        editor.focus();
    }

    function initGrid(){

        layui.table.render({
            elem: '#mygrid'
            ,height: height*0.45
            ,size: 'sm' //小尺寸的表格
            ,page: false //开启分页
            ,cols: [
            [ //表头
                {field: 'xh', title: '序号', width:40,type:"numbers"}
                ,{field: 'name', title: '表名', width:150,}
                ,{field: 'code', title: '表代码', width:150}
                ,{ field: 'opear', title: '操作',width: '20%',templet: function(d){
                    var str="";

                    str += '<button type="button" onclick="selectTable(\''+d.code+'\')" class="layui-btn layui-btn-normal layui-btn-xs layui_edit_btn">选择</button>';

                    return str;
                } }
            ]]
        });

        //单击表格
        dlCommon.layerTableOn('mygrid', function (obj) {
            grid3tableid=obj.data.tableid;
            grid3tablecode=obj.data.code;
            getFileddataList();
        });

        layui.table.render({
            elem: '#mygrid2'
            ,height: height*0.5
            ,size: 'sm' //小尺寸的表格
            ,page: false //开启分页
            ,cols: [
            [ //表头
                { field: 'xh', title: '序号', width: '14%', fixed: 'left' },
                { field: 'fieldName', title: '中文名称', sort: true, width: '32%' },
                { field: 'fieldCode', title: '字段代码', sort: true, width: '32%', },
                // { field: 'fieldType', title: '字段类型', sort: true, width: '15%', },
                // { field: 'bz', title: '备注',  },
                { field: 'opear', title: '操作',width: '20%',templet: function(d){
                    var str="";

                    str += '<button type="button" onclick="selectField(\''+d.fieldCode+'\')" class="layui-btn layui-btn-normal layui-btn-xs layui_edit_btn">选择</button>';

                    return str;
                } }
            ]]
        });

    }

    function getMetadataList(){
        layui.table.reload("mygrid",{
            url:"/DevtFormMetadataController/getAll",
            loading:true,
            where:{templeid:templeid},
            done:function(){
                dlCommon.layerSelectTable("mygrid2")
            }
        });
    }

    function getFileddataList(){
        if(!grid3tableid){
            return;
        }
        var data={
            tableid:grid3tableid
        };
        layui.table.reload("mygrid2",{
            url:"/DevtModelMetadataFieldController/getAll",
            where:data,
            loading:true,
        });
    }


</script>

</html>
